import React, { useState } from 'react';
import Head from 'next/head'
import { Row, Col, BackTop } from 'antd'
import Header from '../component/Header'
import MyList from '../component/MyList'
import Author from '../component/Author'
import Advert from '../component/Advert'
import Footer from '../component/Footer'
import Router from 'next/router'
import { getListByType } from '../api/list'

const Life = ({ list }) => {


  const [allList, setAllList] = useState(list)
  const toDetail = (id) => {
    Router.push({
      pathname: "/detail",
      query: {
        id: id
      }
    })
  }

  return (
    <div className="container">
      <Head>
        <title>老王的前端成长记录-生活</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header path="/life" />
      <Row className="common-main" type="flex" justify="center">
        <Col className="common-left" xs={24} sm={24} md={16} lg={14} xl={14}>
          <MyList
            title="生活记录"
            data={allList}
            toDetail={toDetail}
          />
        </Col>
        <Col className="common-right" xs={0} sm={0} md={8} lg={6} xl={4}>
          <Author />
          <Advert />
        </Col>
      </Row>
      <BackTop />
      <Row>
        <Footer />
      </Row>
    </div>
  )
}
Life.getInitialProps = async () => {
  let res = await getListByType(9)
  return res
}

export default Life
